import { Map, View, Feature, Overlay } from "ol";
import { defaults as defaultControls } from "ol/control";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import GeoJSON from "ol/format/GeoJSON";
import {
    Stroke,
    Style,
    Fill,
    Icon,
    Text,
    Circle as CircleStyle,
} from "ol/style";

class MyMap {
    constructor(target, center, zoom) {
        this.map = new Map({
            controls: defaultControls({
                zoom: false,
            }),
            layers: [],
            target,
            view: new View({
                projection: "EPSG:4326", // 4326经纬度 3857投影
                center, // fromLonLat
                zoom,
                maxResolution: 1.2345 / 100, // 设置最大分辨率 值越大 地图最小层级比例尺就越大
                minZoom: 0,
                maxZoom: 20,
            }),
        });
    }
    addBaseMap({ name, id, data }) {
        console.log('addLines', name, id, data)
        let vectorLayer = new VectorLayer({
            source: new VectorSource(),
            name,
        });
        let features = new GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.setStyle(null);
        vectorLayer.getSource().addFeatures(features);
        this.map.addLayer(vectorLayer);

        this.getFeaturesByLayer(vectorLayer).then((features) => {
            console.log("获取features", features);
            let style = null;
            features.forEach((feature) => {
                style = {
                    strokeColor: "rgba(79, 210, 177, 0.05)",
                    strokeWidth: 1,
                    fillColor: "rgba(79, 210, 177, 0)",
                    textfillColor: "rgba(255, 255, 255, 0.3)",
                    textFont: "18px Calibri,sans-serif",
                    textName: feature.values_.name,
                };
                if (id === "行政区省") {
                    style = {
                        strokeColor: "#3AC2FE",
                        strokeWidth: 2,
                        fillColor: "rgba(79, 210, 177, 0)",
                        textfillColor: "#122136",
                        textFont: "40px",
                    };
                }
                if (id === "行政区市") {
                    style = {
                        ...style,
                        fillColor: "#003459",
                        textName: feature.values_.name,
                    };
                }
                this.setStyleByFeature(feature, style);
            });
        });
        if (id === "行政区省") {
            this.addShadow(vectorLayer);
        }
    }
    getFeaturesByLayer(layer) {
        return new Promise((resolve, reject) => {
            resolve(layer.getSource().getFeatures());
        });
    }
    // 设置WFS图层样式
    setStyleByFeature(feature, parameter) {
        let style = new Style({
            stroke: new Stroke({
                // 边线样式
                color: parameter.strokeColor ? parameter.strokeColor : "transparent",
                width: parameter.strokeWidth ? parameter.strokeWidth : 0,
                lineDash: parameter.lineDash ? parameter.lineDash : [0],
            }),
            fill: new Fill({
                // 填充样式
                color: parameter.fillColor ? parameter.fillColor : "transparent",
            }),
            image: new CircleStyle({
                // 点样式
                fill: new Fill({
                    color: parameter.imagefillColor
                        ? parameter.imagefillColor
                        : "transparent",
                }),
                radius: parameter.imageRadius ? parameter.imageRadius : 0,
            }),
            text: new Text({
                // 文字标注样式
                font: parameter.textFont
                    ? parameter.textFont
                    : "0px Calibri,sans-serif",
                text: parameter.textName ? parameter.textName : "",
                fill: new Fill({
                    color: parameter.textfillColor
                        ? parameter.textfillColor
                        : "transparent",
                }),
            }),
        });
        feature.setStyle(style);
    }
    // 添加阴影
    addShadow(vectorLayer, value = 15) {
        vectorLayer.on("prerender", (evt) => {
            evt.context.shadowBlur = value;
            evt.context.shadowColor = "#3AF3FE";
        });
        vectorLayer.on("postrender", (evt) => {
            evt.context.shadowBlur = 0;
            evt.context.shadowColor = "#3AF3FE";
        });
    }
    // 绘制全省高速图层
    addProvinceRoad(list) {
        var vectorLayer = new VectorLayer({
            source: new VectorSource(),
            name: "全省高速",
            zIndex: 3,
        });
        var newFeatures = null;
        let qsFeatures = {
            features: [],
            type: "FeatureCollection",
        };
        console.time("渲染省份耗时");
        list.forEach((nodesInfo) => {
            JSON.parse(nodesInfo.addRoadBorder).forEach((road) => {
                var feature = {
                    type: "Feature",
                    geometry: {
                        type: "LineString",
                        coordinates: road.path,
                    },
                    properties: {
                        id: nodesInfo.nodeId,
                        name: nodesInfo.nodeName,
                    },
                };
                qsFeatures.features.push(feature);
            });
        });
        if (qsFeatures.features.length > 0) {
            newFeatures = new GeoJSON().readFeatures(qsFeatures);
        }
        console.timeEnd("渲染省份耗时");
        vectorLayer.getSource().clear();
        vectorLayer.setStyle(null);
        vectorLayer.getSource().addFeatures(newFeatures);
        this.map.addLayer(vectorLayer);
        this.getFeaturesByLayer(vectorLayer).then((features) => {
            var style = {
                strokeColor: "rgba(255, 255, 255, 0.2)", //路段颜色
                strokeWidth: 3, //路段宽度
                fillColor: "",
                textfillColor: "#00ffaf",
                textFont: "40px",
            };
            features.forEach((feature) => {
                this.setStyleByFeature(feature, style);
            });
        });
    }
    setCenter(center = [112.575916, 30.95], zoom = 1.08, duration = 1000) {
        this.map.getView().animate({
            center,
            duration,
            zoom,
        });
    }
}
export {
    MyMap
}